<template>
	<bigScreenContainer>
		<div class="page_board">
			<div class="page_header"
				:style="{ background: `url(${componentContent.imageMap['bg_head']}) no-repeat`, 'background-size': '100% 100%' }">
				<span>腾 洋 仓 储 驾 驶 舱</span></div>
			<div class="page_content">
				<div class="home_top">
					<div>
						<div class="com_big_title"></div>
						<div class="com_box">
							<div class="c_box">
								<div class="c_title">
									<span>累计入库数量</span><label>{{ crkslData.rksl }}件</label>
									<span>累计出库数量</span><label>{{ crkslData.cksl }}件</label>
								</div>
								<div class="com_table">
									<div class="thead">
										<div>仓库</div>
										<div>物料类别</div>
										<div>入库数量</div>
										<div>出库数量</div>
										<div>库存数量</div>
										<div>单位</div>
									</div>
									<div class="tbody" style="height:180px;">
										<div class="tr" v-for="item in crkInfo">
											<div>{{ item.ck }}</div>
											<div>{{ item.wllb }}</div>
											<div>{{ item.rksl }}</div>
											<div>{{ item.cksl }}</div>
											<div>{{ item.kcsl }}</div>
											<div>{{ item.dw }}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div class="com_big_title">出入库分析</div>
						<div class="com_box">
							<div class="com_chart" ref="domCrkfx"></div>
						</div>
					</div>
					<div>
						<div class="com_big_title"></div>
						<div class="com_box">
							<div class="c_box">
								<div class="c_title">
									<span>即时库存</span><label>{{ jskcData }}件</label>
								</div>
								<div class="com_table">
									<div class="thead">
										<div>仓库</div>
										<div>品类</div>
										<div>数量</div>
									</div>
									<div class="tbody" style="height:180px;">
										<div class="tr" v-for="item in jskcInfo">
											<div>{{ item.ck }}</div>
											<div>{{ item.pl }}</div>
											<div>{{ item.sl }}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="home_center">
					<div>
						<div class="com_big_title">及时入库分析</div>
						<div class="com_box">
							<div class="c_box">
								<div class="c_left">
									<div class="c_title"><span>累计入库数</span><label>{{ jsrkData.kcsl }}万件</label></div>
									<div class="chart">
										<div class="com_chart" ref="domJsrkfx"></div>
									</div>
								</div>
								<div>
									<div class="c_right">
										<div><span>及时入库率</span><label class="c_blue">{{ jsrkData.jsrkl }}%</label></div>
										<div>
											<span>月度入库数量</span><label class="c_green">{{ jsrkData.ydrksl }}万件</label>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div class="com_big_title">每月库存数</div>
						<div class="com_box">
							<div class="com_chart" ref="domMykcs"></div>
						</div>
					</div>
				</div>
				<div class="home_bottom">
					<div>
						<div class="com_big_title">成品出库分析</div>
						<div class="com_small_title">
							<div v-for="item in title" :style="{ background: item.bgColor }"
								:class="[item.select ? 'select' : '']" @click="tabChange(item.bigTitle)">
								<label>{{ item.bigTitle }}</label>
								<span v-if="item.smallTitle" :style="{ color: item.lineColor }">{{ item.smallTitle
                                    }}</span>
							</div>
						</div>
						<div class="com_box">
							<div v-if="title[0].select" class="com_chart" key="domLjcksl" ref="domLjcksl"></div>
							<div v-if="title[1].select" class="com_chart" key="domLjckje" ref="domLjckje"></div>
							<div v-if="title[2].select" class="com_chart" key="domLjckpc" ref="domLjckpc"></div>
						</div>
					</div>
					<div>
						<div class="com_big_title">库存周转率</div>
						<div class="com_box">
							<div class="com_table">
								<div class="thead">
									<div>年月</div>
									<div>期初存货(万元)</div>
									<div>期末存货(万元)</div>
									<div>平均存货(万元)</div>
									<div>营业成本(万元)</div>
									<div>库存周转率(次)</div>
									<div>库存周转率-同比</div>
									<div>库存周转率-环比</div>
								</div>
								<div class="tbody" style="height:320px;">
									<div class="tr" v-for="item in kzzzlInfo">
										<div>{{ item.ny }}</div>
										<div>{{ item.qcch }}</div>
										<div>{{ item.qmch }}</div>
										<div>{{ item.pjch }}</div>
										<div>{{ item.yycb }}</div>
										<div>{{ item.kczzl }}</div>
										<div>{{ item.kczzl_tb }}</div>
										<div>{{ item.kczzl_hb }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</bigScreenContainer>
</template>
<script>
	const xAxis = {
    type: 'category',
    axisLine: {
        lineStyle: {
            color: '#DDDDDD',
            width: 2
        }
    },
    axisTick: {
        show: false
    },
    axisLabel: {
        color: '#DDDDDD',
    },
    data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
}
const yAxis = {
    type: 'value',
    nameTextStyle: { color: '#DDDDDD' },
    axisLine: {
        show: false
    },
    axisLabel: {
        color: '#DDDDDD'
    },
    splitLine: {
        show: true,
        lineStyle: {
            type: 'dashed',
            color: '#E6E6E6'
        }
    }
}
export default {
    name: "storage",
    data() {
        return {
            componentContent,
            title: [
                {
                    bigTitle: '累计出库数量',
                    smallTitle: '',
                    bgColor: 'rgba(143,205,240,0.3)',
                    lineColor: '#DDDDDD',
                    select: true
                }, {
                    bigTitle: '累计出库金额',
                    smallTitle: '',
                    bgColor: 'rgba(70,168,247,0.3)',
                    lineColor: '#DDDDDD',
                    select: false
                }, {
                    bigTitle: '累计出库批次',
                    smallTitle: '',
                    bgColor: 'rgba(32,252,255,0.25)',
                    lineColor: '#DDDDDD',
                    select: false
                }
            ],
            bardOption: {
                grid: {
                    top: '18%',
                    bottom: '10%',
                    left: '10%',
                    right: '3%'
                },
                xAxis: xAxis,
                yAxis: {
                    ...yAxis,
                    name: '单位：万件',
                },
                legend: {
                    right: '20',
                    top: '10',
                    textStyle: { color: '#DDDDDD' },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                color: ['#0294f5', '#13ea8c'],
                series: [
                    {
                        type: 'bar',
                        name: '2023',
                        barWidth: 16,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [8, 8, 0, 0]
                            }
                        },
                        data: [3000, 2500, 1500, 600, 1000, 1400, 2500, 3600, 4001, 1007, 2008, 1001]
                    }, {
                        type: 'bar',
                        name: '2024',
                        barWidth: 16,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [8, 8, 0, 0]
                            }
                        },
                        data: [1430, 5825, 4515, 5336, 4410, 1254, 2242]
                    }
                ]
            },
            lineOption: {
                grid: {
                    top: '18%',
                    bottom: '13%',
                    left: '10%',
                    right: '3%'
                },
                xAxis: xAxis,
                yAxis: {
                    ...yAxis,
                    name: '单位：万件',
                },
                legend: {
                    right: '20',
                    top: '10',
                    textStyle: { color: '#DDDDDD' },
                    itemWidth: 16,
                    itemHeight: 8
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                color: ['#6FE590'],
                series: [
                    {
                        name: '2024',
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(111, 229, 144, 0.3)' }, // 渐变色的起始颜色
                                { offset: 1, color: 'transparent' } // 渐变色的结束颜色
                            ])
                        },
                        data: [9500, 6700, 4500, 6008, 7500, 6800]
                    }
                ]
            },
            barOption: {
                grid: {
                    top: '18%',
                    bottom: '10%',
                    left: '10%',
                    right: '3%'
                },
                xAxis: xAxis,
                yAxis: {
                    ...yAxis,
                    name: '单位：件'
                },
                legend: {
                    right: '20',
                    top: '10',
                    textStyle: { color: '#DDDDDD' },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                color: ['#43A8F4'],
                series: [
                    {
                        type: 'bar',
                        name: '出库',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [15, 15, 0, 0]
                            }
                        },
                        data: [30, 25, 15, 60, 10, 14, 25, 36, 40, 17, 28, 11]
                    }
                ]
            },
            crkInfo: [],
            crkslData: {},
            jskcInfo: [],
            jsrkData: {},
            jskcData: 0,
            kzzzlInfo: [],
            year: []
        }
    },
    computed: {},
    mounted() {
        let date = new Date();
        this.year = [date.getFullYear() - 1, date.getFullYear()];
        this.getData();
        this.tabChange('累计出库数量');
    },
    methods: {
        //表格滚动
        scrollBar(ref) {
            let dom = this.$refs[ref];
            let height = dom.offsetHeight;
            if (dom.offsetHeight < dom.scrollHeight) {
                setInterval(() => {
                    let topHeight = dom.scrollTop;
                    let scrollHeight = dom.scrollHeight
                    if (scrollHeight == height + topHeight) {
                        dom.scrollTop = 0;
                    } else {
                        dom.scrollTop = topHeight + 44;
                    }
                }, 2000)
            }
        },
        //初始化平台方法
        requestCode() {
            return this.WitGlobal.requestCode(...arguments);
        },
        getData() {
            this.requestCode("SJKB.CC.db.manage.selectBoardCcCrkxx", {}).then(res => {
                if (res.code == 200) {
                    let ckzs = 0, rkzs = 0;
                    this.crkInfo = res.data;
                    res.data.forEach(item => {
                        ckzs += Number(item.cksl);
                        rkzs += Number(item.rksl);
                    });
                    this.crkslData.cksl = ckzs;
                    this.crkslData.rksl = rkzs;
                }
            });
            this.requestCode("SJKB.CC.db.manage.selectBoardCcjskc", {}).then(res => {
                if (res.code == 200) {
                    let jsrkzs = 0;
                    this.jskcInfo = res.data;
                    res.data.forEach(item => {
                        jsrkzs += Number(item.sl);
                    });
                    this.jskcData = jsrkzs;
                }
            });
            this.requestCode("SJKB.CC.db.manage.selectBoardCcKczzl", {}).then(res => {
                if (res.code == 200) {
                    this.kzzzlInfo = res.data;
                }
            });
            this.requestCode("SJKB.CC.db.manage.selectBoardCcY", {}).then(res => {
                if (res.code == 200) {
                    let rest = res.data;
                    let ckData = {}, rkData = {}, jsrkData = {}, ykcData = {}, ljrkzs = 0, jsl = 0;
                    this.year.forEach(item => {
                        ckData[item] = [];
                        rkData[item] = [];
                        jsrkData[item] = [];
                        ykcData[item] = [];
                        for (let i = 1; i < 13; i++) {
                            let obj = rest.find(it => it.year == item && it.month == i) || {};
                            ckData[item].push(obj.ck || '');
                            rkData[item].push(obj.rk || '');
                            jsrkData[item].push(obj.rksl || '');
                            ykcData[item].push(obj.kc || '');
                        }
                    });
                    let currYearData = rest.filter(i => i.year == this.year[1]);
                    currYearData.forEach(item => {
                        ljrkzs += Number(item.rk);
                        jsl += Number(item.rkl);
                    })
                    this.jsrkData.kcsl = ljrkzs;
                    this.jsrkData.jsrkl = (jsl / currYearData.length).toFixed(2);
                    this.jsrkData.ydrksl = (ljrkzs / currYearData.length).toFixed(2);
                    let option1 = JSON.parse(JSON.stringify(this.bardOption));
                    let option2 = JSON.parse(JSON.stringify(this.bardOption));
                    let lineOption = this.lineOption;
                    option1.series[0].name = '出库';
                    option1.series[1].name = '入库';
                    option1.series[0].data = ckData[this.year[1]];
                    option1.series[1].data = rkData[this.year[1]];
                    option2.color = ['#43a8f4', '#20fcff']
                    option2.series[0].name = this.year[0];
                    option2.series[1].name = this.year[1];
                    option2.series[0].data = ykcData[this.year[0]];
                    option2.series[1].data = ykcData[this.year[1]];
                    lineOption.series[0].data = jsrkData[this.year[1]];
                    this.$nextTick(() => {
                        echarts.init(this.$refs.domCrkfx).setOption(option1);
                        echarts.init(this.$refs.domMykcs).setOption(option2);
                        echarts.init(this.$refs.domJsrkfx).setOption(lineOption);
                    })
                }
            });
        },
        tabChange(name) {
            this.title.forEach(item => {
                item.select = false;
                if (item.bigTitle == name) {
                    item.select = true;
                }
            });
            this.requestCode("SJKB.CC.db.manage.selectBoardCcCpckfx", {}).then(res => {
                if (res.code == 200) {
                    let xData = [], cksl = [], ckje = [], ckpc = [];
                    res.data.forEach(item => {
                        xData.push(item.ck);
                        cksl.push(item.cksl);
                        ckje.push(item.ckje);
                        ckpc.push(item.ckpc);
                    });
                    let option = JSON.parse(JSON.stringify(this.barOption));
                    option.xAxis.data = xData;
                    if (name == '累计出库数量') {
                        option.series[0].value = cksl;
                        this.$nextTick(() => {
                            echarts.init(this.$refs.domLjcksl).setOption(option);
                        })
                    } else if (name == '累计出库金额') {
                        option.yAxis.name = '单位：万元';
                        option.series[0].value = ckje;
                        this.$nextTick(() => {
                            echarts.init(this.$refs.domLjckje).setOption(option);
                        })
                    } else {
                        option.series[0].value = ckpc;
                        this.$nextTick(() => {
                            echarts.init(this.$refs.domLjckpc).setOption(option);
                        })
                    }
                }
            })

        },
    },
};
</script>
<style lang="less" scoped>
	.page_board {
		width: 1920px;
		height: 1080px;
		background: #111726;
		display: flex;
		flex-direction: column;
		font-size: 14px;
		line-height: normal;
		color: #DDDDDD;

		.page_header {
            height: 80px;
            line-height: 70px;
            background: url(./top.png) no-repeat;
            background-size: cover;
            font-weight: 600;
            font-size: 24px;
            color: #ffffff;
            text-align: center;
            span{
                font-weight: 600;
                font-size: 40px;
                color: #ffffff;
                text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
                background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                text-align: center;
                padding-top: 36px;
            }
		}

		.page_content {
			flex: auto;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 20px;
			padding-top: 0;
			height: 960px;

			.com_big_title {
				font-size: 20px;
				color: #0095ff;
				height: 60px;
				padding-top: 21px;
				text-align: center;
			}

			.com_small_title {
				display: flex;
				flex-direction: row;

				&>div {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 60px;
					color: #FFFFFF;
					border-bottom: 3px solid rgba(0, 0, 0, 0);

					span {
						margin-top: 5px;
						color: #DDDDDD;
					}
				}

				.bg1 {
					background: rgba(70, 168, 247, 0.3);

					span {
						color: #46a8f7;
					}
				}

				.bg2 {
					background: rgba(230, 207, 92, 0.25);

					span {
						color: #e6cf5c;
					}
				}

				.select {
					border-bottom: 3px solid #077dee;
				}
			}

			.com_box {
				flex: auto;
				background: rgba(255, 255, 255, 0.05);
				flex-shrink: 0;
				overflow: hidden;
				padding: 0 10px;
			}

			.com_chart {
				width: 100%;
				height: 100%;
			}

			.com_table {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;

				.thead,
				.tr {
					display: flex;
					flex-direction: row;

					&>div {
						flex: 1;
						padding: 7px;
						overflow: hidden;
						white-space: nowrap;
					}
				}

				.thead {
					color: #1a79ff;
					padding: 5px 0;
				}

				.tbody {
					height: 150px;
					overflow-y: scroll;

					&::-webkit-scrollbar {
						display: none;
					}

					.tr {
						&:nth-child(2n-1) {
							background: rgba(0, 0, 0, 0.1);
							border-bottom: 1px solid #e6e6e6;
							border-top: 1px solid #e6e6e6;
						}
					}
				}
			}

			&>div {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				&>div {
					flex: 1;
					display: flex;
					flex-direction: column;

					&:not(:last-child) {
						margin-right: 20px;
					}
				}
			}

			.c_box {
				width: 100%;
				height: 100%;

				.c_title {
					padding: 20px 21px 5px 21px;
					color: #DDDDDD;

					span {
						font-size: 12px;
						margin-right: 13px;
					}

					label {
						font-weight: 600;
						font-size: 14px;
						margin-right: 39px;
					}
				}
			}

			.home_top {
				height: 328px;
				.com_table {
					width: 100%;
					height: 220px;
				}
				.c_box {
					display: flex;
					flex-direction: column;

					.c_table {
						flex: auto;
					}
				}
			}

			.home_center {
				height: 330px;

				.c_box {
					display: flex;
					flex-direction: row;

					.c_left {
						flex: auto;
						display: flex;
						flex-direction: column;

						.chart {
							flex: auto;
						}
					}

					.c_right {
						width: 170px;
						padding-top: 29px;

						&>div {
							width: 150px;
							height: 80px;
							background: rgba(255, 255, 255, 0.1);
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-bottom: 10px;

							span {
								font-size: 14px;
								color: #DDDDDD;
								margin-bottom: 6px;
							}

							label {
								font-weight: 600;
								font-size: 24px;
							}

							.c_blue {
								color: #43a8f4;
							}

							.c_green {
								color: #20f7fb;
							}
						}
					}
				}
			}

			.home_bottom {
				height: 330px;
				.com_table {
					width: 100%;
					height: 250px;
				}
			}
		}
	}
</style>